<template>
  <page-header-wrapper :title="false">
    <a-card
      title="合同信息"
      :loading="loading"
    >
      <template slot="extra">
        <a-button v-if="!loading" type="primary" icon="edit" @click="changeStatus">{{statusOpts[contractInfo.status]}}</a-button>
        <a-button type="default" style="margin-left:5px" @click="getBase">刷新</a-button>
      </template>
      <a-alert type="error" :style="{ marginBottom: '20px' }">
        <template slot="message">
          顾问姓名：{{contractInfo.username}}
          <a-divider type="vertical" />
          合同编号：{{contractInfo.contract_no}}
        </template>
        <template slot="description">
          <p></p>
          <p></p>合同金额：{{contractInfo.amount}}(官费：{{contractInfo.official_fee}} | 代理费：{{contractInfo.agency_fee}}) (已打款金额：{{contractInfo.amount_paid}} | 剩余尾款：{{contractInfo.tail_money}})
        </template>
      </a-alert>
      <a-tabs size="large" type="card" v-model="tab">
        <a-tab-pane key="1" tab="业务信息"></a-tab-pane>
        <a-tab-pane key="2" tab="基本信息"></a-tab-pane>
        <a-tab-pane key="3" tab="打款信息"></a-tab-pane>
        <a-tab-pane key="4" tab="地址信息"></a-tab-pane>
        <a-tab-pane key="5" tab="审核历史信息"></a-tab-pane>
<!--        <a-tab-pane key="6" tab="退款信息"></a-tab-pane>-->
      </a-tabs>
      <Business v-if="tab == 1" @change="onChange"></Business>
      <Base v-if="tab == 2"></Base>
      <Payment v-if="tab == 3"></Payment>
      <Address v-if="tab == 4"></Address>
      <History v-if="tab == 5"></History>
<!--      <Refund v-if="tab == 6"></Refund>-->
    </a-card>
    <a-modal
      :confirm-loading="confirmLoading"
      :mask-closable="false"
      title="编辑合同状态"
      v-model="statusVisible"
      @ok="onSubmitStatus"
      @cancel="onCancel"
    >
      <a-form-model
        ref="statusForm"
        :model="statusForm"
      >
        <a-form-model-item>
          <a-radio-group v-model="statusForm.status" @change="onChangeStatus">
            <a-radio v-for="(item,index) in status" :key="index" :value="index">{{item}}</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item>
          <a-textarea v-model="statusForm.notes" :rows="4"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { Base, Business, Payment, Address, History } from './components'
import { getContractBase, getEditStatus, postEditStatus } from '@/api/contract'

export default {
  name: 'ContractDetail',
  components: { History, Address, Payment, Base, Business },
  data () {
    return {
      contractInfo: {},
      tab: '1',
      loading: true,
      confirmLoading: false,
      status: {},
      statusOpts: {},
      statusForm: {},
      statusVisible: false
    }
  },
  activated () {
    this.getBase()
  },
  methods: {
    getBase () {
      getContractBase(this.$route.params.id).then(res => {
        this.loading = true
        this.statusOpts = res.result.statusOpts
        this.contractInfo = res.result
      }).finally(() => {
        this.loading = false
      })
    },
    changeStatus () {
      this.statusForm = {}
      this.statusForm['contract_id'] = this.$route.params.id
      getEditStatus(this.$route.params.id).then(res => {
        if (res.result.status_opts === '') {
          this.$warning({
            title: '暂无权限编辑'
          })
        } else {
          if (res.result.contract_status === 44) {
            this.statusForm.status = '42'
          } else {
            this.statusForm.status = '44'
          }
          this.status = res.result.status_opts
          this.statusVisible = true
        }
      })
    },
    onSubmitStatus () {
      const app = this
      const data = {}
      app.confirmLoading = true
      data['contract[status]'] = app.statusForm.status
      data['contract[notes]'] = app.statusForm.notes
      data['contract_id'] = app.statusForm.contract_id
      postEditStatus(data).then(res => {
        if (res.status === 0) {
          this.onCancel()
          this.$nextTick(() => {
            this.getBase()
          })
        } else {
          app.$warning({
            title: res.msg
          })
          app.confirmLoading = false
        }
      })
    },
    onCancel () {
      this.statusForm = {}
      this.statusVisible = false
      this.confirmLoading = false
    },
    onChange () {
      this.getBase()
    },
    onChangeStatus (e) {
      this.statusForm.status = e.target.value
    }
  }
}
</script>

<style scoped>

</style>
